<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">

// 定义普通数据即可
const info = '么么哒'
const htmlStr = '<button>点我试试</button>'

</script>

<!-- 结构 -->
<template>
  <div>
    <!-- 普通文本 v-html，v-text 没有区别，标签内部 不能写东西，会被覆盖（没有意义） -->
    <p v-text="info"> </p>
    <p v-html="info"></p>
    <h2>渲染标签</h2>
    <!-- 针对 html 标签如果要解析，需要 v-html -->
    <p v-text="htmlStr"></p>
    <p v-html="htmlStr"></p>

    <!-- 无论是 v-html 还是 v-text 都会覆盖 子元素（内容会被替换） -->
     <!-- 不希望替换 标签的内容 推荐使用 插值表达式{{  }},html 不会解析的 -->
    <h2>插值表达式</h2>
    <p>左边的内容{{ htmlStr }}右边的内容</p>
  </div>
</template>


<!-- 样式 -->
<style scoped>

</style>